<template>
	<view class="address-edit">
		<van-skeleton title avatar row="3" :loading="loading">
			<view class="content">
				<!-- 输入框组 -->
				<view class="content-list">
					<!-- 电话 -->
					<view class="content-item">
						<view class="left">联系人</view>
						<view class="right"><input v-model="formInput.contacts" type="text" placeholder="姓名" /></view>
					</view>
					<!-- 手机号 -->
					<view class="content-item">
						<view class="left">电话</view>
						<view class="right"><input v-model="formInput.phone" type="text" placeholder="手机号码" /></view>
					</view>

					<!-- 地址 -->
					<van-cell title="地址">
						<picker mode="region" :value="region" @change="regionChange">
							<view class="city" v-if="!region.length">请选择省/市/区</view>
							<view class="city2" v-else>{{ region.join('') }}</view>
						</picker>
					</van-cell>
					<!-- 详细地址 -->
					<view class="content-item">
						<view class="left">门牌号</view>
						<view class="right"><input v-model="formInput.address" type="text" placeholder="例: 1号楼一单元101室" /></view>
					</view>
					<!-- 默认地址 -->
				</view>
				<van-cell class="default" title="设为默认收货地址"><van-switch active-color="#ee0a24" :checked="checked" @change="switchChange"></van-switch></van-cell>

				<view class="button" v-if="id">
					<view class="button-a"><van-button block v-if="id" @click="onDelete">删除</van-button></view>

					<van-goods-action-button text="保存" @click="saveAddress" />
				</view>
				<view class="button2" v-else><van-goods-action-button text="保存" @click="saveAddress" /></view>
			</view>
		</van-skeleton>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reactive, toRefs } from 'vue'
import { reqGetAddress, reqgetdz, reqPutAddress, reqDeleteAddress } from '@/api/modules/address'

const state = reactive({
	loading: false,
	formInput: {
		contacts: '',
		phone: '',
		address: '',
		onsale: 0,
		nv: ''
	},
	checked: false,
	region: [],
	id: '',
	radioList: [
		{
			value: 1,
			name: '先生'
		},
		{
			value: 2,
			name: '女士'
		}
	],
	current: 0
})

// 初始化方法
const init = async () => {
	uni.showLoading({ title: '加载中...', mask: true })
	const userInfo = uni.getStorageSync('USERINFO')
	const { data } = await reqgetdz({ id: state.id, uid: userInfo.uid })
	const data2 = data.data[0]
	data2.onsale === 0 ? (state.checked = false) : (state.checked = true)
	state.formInput = data2
	state.region = [data2.province, data2.city, data2.county]
	uni.hideLoading()
}

// 省市区选择
const regionChange = e => {
	const value = e.detail.value
	state.region = value
	state.formInput.province = value[0]
	state.formInput.county = value[1]
	state.formInput.city = value[2]
}

// 修改默认
const switchChange = e => {
	e.detail ? (state.formInput.onsale = 1) : (state.formInput.onsale = 0)
	state.checked = e.detail
}

// 保存 |修改 地址
const saveAddress = async () => {
	if (state.id) {
		const { data } = await reqPutAddress(state.formInput)
		uni.showToast({
			title: data.data,
			icon: 'none'
		})
		setTimeout(() => {
			uni.navigateTo({
				url: '/subpkg/address/address'
			})
		}, 500)
	} else {
		const { contacts, phone, address } = state.formInput
		if (!contacts.length) {
			uni.showToast({
				title: '请填写联系人',
				icon: 'none'
			})
		} else if (!phone.length) {
			uni.showToast({
				title: '请填联系电话',
				icon: 'none'
			})
		} else if (!address.length) {
			uni.showToast({
				title: '请填服务地址',
				icon: 'none'
			})
		} else {
			const { data } = await reqGetAddress(state.formInput)
			uni.showToast({
				title: '添加成功',
				icon: 'none'
			})
			setTimeout(()=> {
				uni.navigateBack()
			}, 500)
		}
	}
}

const radioChange = e => {
	for (let i = 0; i < state.radioList.length; i++) {
		if (state.radioList[i].value === e.detail.value) {
			state.current = i
		}
	}
	state.formInput.nv = e.detail.value
}

// * 删除地址
const onDelete = async () => {
	await reqDeleteAddress(state.id)
	uni.showToast({
		title: '删除成功',
		icon: 'none'
	})
	setTimeout(() => {
		uni.navigateBack()
	}, 500)
}

// 页面加载
onLoad(message => {
	console.log(message);
	// 1. 获取页面参数
	const { id } = message
	// 2. 保存页面参数
	state.id = id
	// 3. 动态修改标题
	uni.setNavigationBarTitle({ title: id ? '修改地址' : '新增地址' })
	// 4. 初始化
	if (id) {
		init()
	}
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})

const { formInput, region, id, radioList, current, checked, loading } = toRefs(state)
</script>

<style lang="scss">
page {
	padding: 0;
	background-color: #f5f5f5;
}
.content {
	.content-list {
		background-color: #fff;
	}
	.button2 {
		display: flex;
		align-items: center;
		width: 500rpx;
		margin-top: 50rpx;
		margin-left: 120rpx;
	}
	.button {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		justify-content: space-between;
		margin-top: 50rpx;
		.button-a {
			.van-button {
				flex: 1;
				width: 200rpx;
			}
		}

		.van-goods-action-button {
			margin-left: 50rpx;
			width: 400rpx;
		}
	}
	.content-list {
		padding: 20rpx 40rpx;
		.van-cell {
			padding: 20rpx 0;
			.van-cell__title {
				flex: 1;
				width: 170rpx;
			}
		}
		.content-item {
			display: flex;
			align-items: center;
			height: 60rpx;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #f5f5f5;
			.left {
				width: 156rpx;
				margin-right: 50rpx;
				max-width: 180rpx !important;
				color: #646566;
				font-size: 28rpx;
			}
			.right {
				flex: 1;
				font-size: 28rpx;
			}
		}
	}
	.van-cell__title {
		max-width: 180rpx !important;
		color: #646566;
		margin-right: 24rpx;
	}
	.default .van-cell__title {
		max-width: 100% !important;
	}
	.city {
		color: #ccc;
		text-align: left;
	}
	.city2 {
		color: #000;
		text-align: left;
	}
	switch {
		transform: scale(0.8);
	}
	.radio {
		display: flex;
		height: 80rpx;
		margin-left: 120rpx;
		.uni-list-cell {
			display: flex;
			align-items: center;
			margin-left: 15rpx;
			transform: scale(0.7);
		}
	}
}
</style>
